<template>
  <div style="padding: 0 24px">
    <el-card style="width: 100%;margin-top: 10px;height: 800px">
      <div :style="height" id="div1">
        <el-row style="margin: 20px 0">
          <el-col span="6" class="col">
            <span >单据编号:</span>
            <el-input  style="width: 60%"  placeholder="请输入单据编号" ></el-input>
          </el-col>
          <el-col span="6">
            <span>商品信息:</span>
            <el-input  style="width: 60%" placeholder="请输入条码、名称、规格、型号"></el-input>
          </el-col >
          <el-col span="6" class="col">
            <span>单据日期:</span>
            <el-date-picker
                style="width: 60%"
                v-model="value1"
                type="daterange"
                range-separator="~"
                start-placeholder="开始时间"
                end-placeholder="结束时间">
            </el-date-picker>
          </el-col>
          <el-col span="6" class="col">
            <a style="line-height:27px;border-radius:4px;display:inline-block;
                  background-color:#1890ff;color:white;text-align:center;width:40px;
                  height:27px" href="">查询</a>
            <a style="margin: 0 0 0 8px;display:inline-block;text-align:center;width:40px;
                  height:27px;border-radius:4px;border: 1px solid blue;line-height:27px;" href="">重置</a>
            <a  @click="expand()" style="cursor: pointer;color: #1890ff">{{dj}}</a>
            <el-button style="background-color: white;padding-left:0;color: #1890ff;border: 0" :icon="dp"></el-button>

          </el-col>
        </el-row>
        <el-row style="margin: 24px 0">
          <el-col span="6" class="col">
            <span >供应商  :</span>
            <el-select style="width: 65%" v-model="value2">
              <el-option
                  v-for="item in options"
                  :key="item.value2"
                  :label="item.label2"
                  :value="item.value2">
              </el-option>
            </el-select>
          </el-col>
          <el-col span="6" class="col">
            <span>操作员:</span>
            <el-select style="width: 65%" v-model="value3">
              <el-option
                  v-for="item in options"
                  :key="item.value3"
                  :label="item.label3"
                  :value="item.value3">
              </el-option>
            </el-select>
          </el-col>
          <el-col span="6" class="col">
            <span>单据状态:</span>
            <el-select style="width: 60%" v-model="value4">
              <el-option
                  v-for="item in options"
                  :key="item.value4"
                  :label="item.label4"
                  :value="item.value4">
              </el-option>
            </el-select>
          </el-col>
          <el-col span="6" class="col">
            <span style="margin-left: -13px">单据备注:</span>
            <el-input  style="width: 65%" placeholder="请输入单据备注"></el-input>
          </el-col >
        </el-row>
      </div>

      <el-row style="margin: 20px 0">
        <a href="" style="line-height:27px;border-radius:4px;display:inline-block;
                      background-color:#1890ff;color:white;text-align:center;width: 74px;height: 27px;
                      margin: 0 8px 8px 0;">+新增</a>
        <el-select style="width: 10%" v-model="value" placeholder="批量操作" >
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :class="item.name"
              style="width: 120px ;height: auto">
          </el-option>
        </el-select>
      </el-row>


      <el-table
          :data="tableData"
          border
          style="width: 100%">
        <template>
          <!-- `checked` 为 true 或 false -->

        </template>

        <el-table-column
            prop="date"
            label=""
            width="60">
        </el-table-column>

        <el-table-column
            prop="date"
            label="供应商"
            width="180">
        </el-table-column>
        <el-table-column
            prop="address"
            label="单据编号">
        </el-table-column>
        <el-table-column
            prop="address"
            label="商品信息">
        </el-table-column>
        <el-table-column
            prop="address"
            label="单据日期">
        </el-table-column>
        <el-table-column
            prop="address"
            label="操作员">
        </el-table-column>
        <el-table-column
            prop="address"
            label="金额合计">
        </el-table-column>
        <el-table-column
            prop="address"
            label="状态">
        </el-table-column>
        <el-table-column
            prop="address"
            label="操作">
        </el-table-column>
      </el-table>
    </el-card>

  </div>
</template>

<script>
export default {
  name: "PO",
  data() {
    return {

      options: [{
        value: '选项1',
        label: '删除',
        name:'el-icon-coffee'

      },
        {
          value: '选项2',
          label: '审核',
          name:'el-icon-check'
        }, {
          value: '选项3',
          label: '反审核',
          name:'el-icon-refresh'
        },
        {
          value1: '',
          label1: ''
        },
        {
          value2: '',
          label2: ''
        },
        {
          value3: '',
          label3: ''
        },
        {
          value4: '',
          label4: ''
        }],
      value: '',
      value1: '',
      value2: '',
      value3: '',
      value4: '',
      height:'height: 120px',
      dj : '展开',
      dp : 'el-icon-arrow-down'
    }
  },methods:{
    expand(){
      if (this.height==='height: 120px'){
        this.height = 'height: 60px'
        this.dj = '展开'
        this.dp = 'el-icon-arrow-down'
      }else {
        this.height = 'height: 120px'
        this.dj = '收起'
        this.dp = 'el-icon-arrow-up'
      }
    }
  }

}
</script>

<style scoped>
a {
  text-decoration: none;
  padding: 0 15px
}
.col{
  padding: 0 12px;
}
span{
  font-size: 14px;
  margin: 0 20px 0 0;
}
#div1{
  overflow: hidden;
}

a {
  text-decoration: none;
  padding: 0 15px
}
.col{
  padding: 0 12px;
}
span{
  font-size: 14px;
  margin: 0 20px 0 0;
}
#div1{
  overflow: hidden;
}

</style>
